<template>
    <div>
        <el-dialog
                title="添加家庭成员"
                :visible.sync="dialogVisible"
                width="30%">
            <el-form ref="cusForm" v-model="cusForm" label-width="120px"style="padding-left: 50px">
                <el-form-item label="关联条件：">
                    <el-input :value="leaseXin.customerId" :model="cusForm.customerId=leaseXin.customerId" disabled></el-input>
                </el-form-item>
                <el-form-item label="姓名：">
                    <el-input v-model="cusForm.reName"></el-input>
                </el-form-item>
                <el-form-item label="年龄：">
                    <el-input v-model="cusForm.reBirthday"></el-input>
                </el-form-item>
                <el-form-item label="与户主关系：">
                    <el-input v-model="cusForm.reRelationship"></el-input>
                </el-form-item>
                <el-form-item label="身份证号：">
                    <el-input v-model="cusForm.reTypeId"></el-input>
                </el-form-item>
                <el-form-item label="户口所在：">
                    <el-input v-model="cusForm.reAddress"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="this.dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCusFrom">确 定</el-button>
  </span>
        </el-dialog>


        <el-form ref="leaseForm" v-model="leaseForm" label-width="120px">
            <el-form-item label="姓名：">
                <el-input :value="leaseXin.cname" :model="leaseForm.lname=leaseXin.cname"></el-input>
            </el-form-item>

            <el-form-item label="性别：">
                <el-input v-if="leaseXin.csex==1" value="男"></el-input>
                <el-input v-if="leaseXin.csex==2" value="女"></el-input>
            </el-form-item>
            <el-form-item label="年龄：">
                <el-input :value="leaseXin.age"></el-input>
            </el-form-item>
            <el-form-item label="联系电话：">
                <el-input :value="leaseXin.cphone" :model="leaseForm.lphone=leaseXin.cphone"></el-input>
            </el-form-item>
            <el-form-item label="身份证号：">
                <el-input :value="leaseXin.ctypeId" :model="leaseForm.ltypeId=leaseXin.ctypeId"></el-input>
            </el-form-item>
            <el-form-item label="所在村组：">
                <el-input :value="leaseXin.caddress" :model="leaseForm.laddress=leaseXin.caddress"></el-input>
            </el-form-item>
            <div>
            <el-table
                    :data="tableData"
                    border
                    style="width: 80%"
                    :header-cell-style="{background:'#899ea5',color:'#fcfbfb'}">
                <el-table-column prop="reName" label="姓名"></el-table-column>
                <el-table-column prop="reBirthday" label="年龄">
<!--                    <template v-slot="s">-->
<!--                        {{getAge(s.row.reBirthday)}}-->
<!--                    </template>-->
                </el-table-column>
                <el-table-column prop="reRelationship" label="与户主关系"></el-table-column>
                <el-table-column prop="reTypeId" label="身份证号"></el-table-column>
                <el-table-column prop="reAddress" label="户口所在地"></el-table-column>
                <el-table-column label="操作">
                    <!--<template slot-scope="s">
                        <el-button type="primary" @click="delCus(s.row.reTypeId)">删除</el-button>
                    </template>-->
                </el-table-column>
            </el-table>
            <el-button plain style="width: 80%" @click="dialogVisible = true">+添加</el-button>
            </div>

            <el-form-item label="房产证证书号：">
                <el-input v-model="leaseForm.lproertyOwnershipCert"></el-input>
            </el-form-item>
            <el-form-item label="房产证面积：">
                <el-input v-model="leaseForm.larea"></el-input>
            </el-form-item>
            <el-form-item label="流转年限：">
                <el-input v-model="leaseForm.lyears"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input type="textarea" v-model="leaseXin.textlal" placeholder="示例：
      我户于XX年XX月XX日，取得《不动产权登记证书》（XXXXX不动产权第XXX号。）该证明确：我户 XXX、XXX、XXX 共同享有品准拨用宅基地及其他集体建设用地面积XX平方米，有用合法住房面积XX平方米。现我户资源申请将住房面积XX平方米及宅基地使用权出租给XXX，流转年限XX年。审查通过后，我户须向集体缴纳土地有偿使用收益金XX元。

      在此，我户所有成员，通过XXX方式保障户有所居，以后均不再申请拨用宅基地及其他集体建设用地。"></el-input>
            </el-form-item>
            <el-button type="primary" @click="addLease">下一步</el-button>
        </el-form>
    </div>
</template>

<script>
    export default{
        name: "VitalizeRent",
        data(){
            return{
                leaseForm:{
                    lname:'',
                    ltypeId:'',
                    lphone:'',
                    laddress:'',
                    lproertyOwnershipCert:'',
                    larea:'',
                    lyears:'',
                },
                leaseXin:{
                    cname:'',
                    csex:'',
                    age:'',
                    cphone:'',
                    ctypeId:'',
                    caddress:'',
                    customerId:'',
                    textlal:''
                },
                cusForm:{
                    reName:'',
                    reRelationship:'',
                    reAddress:'',
                    reTypeId:'',
                    reBirthday:'',
                    customerId:'',
                },
                tableData:[],
                dialogVisible: false,
                delId:'',

            }
        },
        created() {
            this.showLease();
            this.cusTable();
        },
        methods:{
        showLease(){
                this.leaseXin = JSON.parse(sessionStorage.getItem('tokenCust'))
            console.log(this.leaseXin)
        },
        cusTable(){
            this.getRequest("/house/customerRelatives/findById/"+this.leaseXin.customerId)
            .then(res=>{
                this.tableData=res.data.list
            })
        },
         addCusFrom(){
                this.postRequest("/house/customerRelatives/addCus",this.cusForm)
                .then(res=>{
                    //console.log(res.data)
                    this.dialogVisible=false;
                    this.cusForm={};
                    this.cusTable();
                })
            },
            addLease(){
                console.log(this.leaseForm.lname+"11111111111111this.leaseForm11111")
                this.postRequest("/house/lease/addTransfer",this.leaseForm)
                .then(res=>{
                    this.leaseForm={}
                })
            }
           /* delCus(row){
                this.delId=row.reTypeId
                this.getRequest(,this.delId)
            }*/
    }
    }
</script>

<style scoped>
.el-input{
    width: 250px;
}

</style>